<template>
  <div class="medium-import-button">
    <el-upload
      ref="elUpload"
      :multiple="false"
      :show-file-list="false"
      :http-request="uploadFileMethod"
      :before-upload="beforeUpload"
      :disabled="isDisabled || loading"
      :auto-upload="true"
      action
      class="medium-file-uploader"
    >
      <div v-if="showFile" class="import-btn">
        <i v-if="loading" class="el-icon-loading" style="margin-right:3px;"/>
        <span class="overflow" >{{ fileNameCopy && fileNameCopy!=='' ? fileNameCopy : btnText }}</span>
        <img :src="upicon" style="width: 16px;height:16px;" alt="上传">
      </div >
      <div v-else>
        <i v-if="loading" class="el-icon-loading" style="margin-right:3px;"/>
        <img :src="downloadIcon" style="width: 16px;height:16px;" alt="上传">
      </div>
    </el-upload>
  </div>
</template>
<script>
import ImportList from '@/mixins/importList';
import uploadIcon from '@/assets/export.png';
import downloadIcon from '@/assets/import.png';
import upicon from '@/assets/icon-upload-blue.png';

export default {
  name: 'ImportButton',
  mixins: [ImportList],
  props: {
    // 按钮文字
    btnText: {
      type: String,
      default: ''
    },
    // 控制是否显示成功和失败提示框
    hideConfirm: {
      type: Boolean,
      default: false
    },
    showFile: {
      type: Boolean,
      default: true
    },
    // 是否可以点击
    isDisabled: {
      type: Boolean,
      default: false
    },
    isMedium: {
      type: Boolean,
      default: false
    },
    importApi: {
      type: String,
      default: () => {
        return '';
      }
    },
    getList: { // 导入后列表刷新的方法
      type: Function,
      default: null
    }
  },
  data() {
    return {
      uploadIcon, downloadIcon, upicon,
      isSealing: false,
      limitNum: false,
      fileName: '',
      fileNameCopy: ''
    };
  },
  methods: {
    clearFile() {
      this.fileName = '';
      this.fileNameCopy = '';
    }
  }
};
</script>
<style scoped rel="stylesheet/scss" lang="scss">
.overflow {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  display: inline-block;
  text-align: left;
  line-height: 1.2;
}
.medium-import-button {
  .import-btn {
    display: flex;
    align-items: center;
    color: #406EFF !important;
    width: 100%;
    max-width: 210px;
    border: 1px solid #B5BDCF;
    border-radius:4px;
    font-size: 14px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    padding: 8px 18px;

    height:32px;
    border-radius:4px;
    border:1px solid rgba(64,110,255,1);
    img {
      width: 16px;
      height: 16px;
      margin-left: 5px;
      position: relative;
    }
  }
  & ::v-deep {
    .el-upload  {
      width: 100%;
    }
  }
}
</style>
